<template>
  <view class="smart-page">
    <!-- 页面标题头begin -->
    <view class="smart-page-head">
      <view class="smart-page-head-title">slider滑块</view>
    </view>
    <!-- 页面标题头end-->
    <view>显示当前view</view>
    <view><slider value="20" show-value="true" @change="sliderChange"></slider></view>
    <view>设置步长step</view>
    <view><slider value="20" show-value="true" @change="sliderChange" step="5"></slider></view>
    <view>设置最大值、最小值</view>
    <view><slider show-value="true" value="100" min="50" max="500"></slider></view>
    <view>设置颜色</view>
    <view>
      <slider activeColor="#C0964" backgroundColor="#AA0000" block-color="#FF0ADAE" block-size="15"></slider>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    /*改变当前slider值，触发事件函数*/
    sliderChange(e){
      console.log('当前value值是: '+e.detail.value);
    }
  }
}
</script>

<style>
</style>